<template>
  <div class="allOf">
    <el-button @click="toScreen" type="success">大屏可视化</el-button>
    <div id="main">
      <el-row :gutter="20" class="row1">
        <el-col :span="8">
          <div class="grid-content ep-bg-purple col-exam col-bgc">
            <div class="box" style="background-color:#5ABB8F">
              <p>泊位总数</p>
              <p>10000</p>
            </div>
            <div class="box" style="background-color:#FF9090">
              <p>已占泊位数</p>
              <p>10000</p>
            </div>
            <div class="box" style="background-color:#6DA7ED">
              <p>剩余泊位数</p>
              <p>10000</p>
            </div>
            <div class="box" style="background-color:#6DA7ED">
              <p>累计停车次数(辆)</p>
              <p>10000</p>
            </div>
          </div>

        </el-col>
        <el-col :span="8">
          <div ref="chart2" style="height: 250px" class="grid-content ep-bg-purple col-bgc"></div>
        </el-col>
        <el-col :span="8">
          <div ref="chart3" style="height: 250px" class="grid-content ep-bg-purple col-bgc"></div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content ep-bg-purple divide">
            <div ref="chart1" class="box2"></div>
            <div ref="chart4" class="box2"></div>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="grid-content ep-bg-purple   ">
            <el-form-item class="parkPic">
              <baidu-map class="map" center="合肥" :zoom="15" scroll-wheel-zoom="true">
                <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true"
                  :autoLocation="true"></bm-geolocation>
                <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
              </baidu-map>
            </el-form-item>
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue'

const router = useRouter()
const toScreen = () => {
  router.push('/screen')
}
// echarts
const chart1 = ref()
const chart2 = ref()
const chart3 = ref()
const chart4 = ref()
onMounted(() => {
  var myChart = echarts.init(chart1.value);
  var myChart2 = echarts.init(chart2.value);
  var myChart3 = echarts.init(chart3.value);
  var myChart4 = echarts.init(chart4.value);
  // 绘制图表
  myChart.setOption({
   /*  title: {
      text: 'Temperature Change in the Coming Week'
    }, */
    tooltip: {
      trigger: 'axis'
    },
    legend: {},
    toolbox: {
      show: true,
      feature: {
        dataZoom: {
          yAxisIndex: 'none'
        },
        dataView: { readOnly: false },
        magicType: { type: ['line', 'bar'] },
        restore: {},
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} °C'
      }
    },
    series: [
      {
        name: 'Highest',
        type: 'line',
        data: [10, 11, 13, 11, 12, 12, 9],
        markPoint: {
          data: [
            { type: 'max', name: 'Max' },
            { type: 'min', name: 'Min' }
          ]
        },
        markLine: {
          data: [{ type: 'average', name: 'Avg' }]
        }
      },
      {
        name: 'Lowest',
        type: 'line',
        data: [1, -2, 2, 5, 3, 2, 0],
        markPoint: {
          data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
        },
        markLine: {
          data: [
            { type: 'average', name: 'Avg' },
            [
              {
                symbol: 'none',
                x: '90%',
                yAxis: 'max'
              },
              {
                symbol: 'circle',
                label: {
                  position: 'start',
                  formatter: 'Max'
                },
                type: 'max',
                name: '最高点'
              }
            ]
          ]
        }
      }
    ]
  });

  // 图表2
  myChart2.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // Use axis to trigger tooltip
        type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    series: [
      {
        name: 'Direct',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [320, 302, 301, 334, 390, 330, 320]
      },
      {
        name: 'Mail Ad',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: 'Affiliate Ad',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: 'Video Ad',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [150, 212, 201, 154, 190, 330, 410]
      },
      {
        name: 'Search Engine',
        type: 'bar',
        stack: 'total',
        label: {
          show: true
        },
        emphasis: {
          focus: 'series'
        },
        data: [820, 832, 901, 934, 1290, 1330, 1320]
      }
    ]
  })

  // 图表3
  myChart3.setOption({
    title: {
      text: 'Referer of a Website',
      subtext: 'Fake Data',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  })

  // 图标4
  myChart4.setOption({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'line',
        symbol: 'triangle',
        symbolSize: 20,
        lineStyle: {
          color: '#5470C6',
          width: 4,
          type: 'dashed'
        },
        itemStyle: {
          borderWidth: 3,
          borderColor: '#EE6666',
          color: 'yellow'
        }
      }
    ]
  })
  window.addEventListener("resize", () => {
    myChart.resize()
    myChart2.resize()
    myChart3.resize()
    myChart4.resize()
  })
})

</script>

<style scoped lang="scss">
 .allOf {
  height: 90vh;
  background-color: #f3f3f3;

}

#main {
  height: 100%;
  background-color: #f3f3f3;

  .col-bgc {
    background-color: white;
    margin-bottom: 20px;

  }
}

:deep .col-exam {
  height: 92%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: space-around;

  .box {
    width: 45%;
    height: 45%;
    // background-color: pink;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;

    p {
      width: 100%;
      text-align: center;
      margin-bottom: 10px;
    }
  }
}

.divide {
  height: 440px;
  // background-color: pink;
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: space-around;

  .box2 {
    width: 96%;
    height: 45%;
    background-color: white;
  }
}

.map {
  width: 100%;
  height: 440px;
}
</style>